/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form
      class="user-search"
      label-width="80px"
      ref="editForm"
      :model="editForm"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名:">
            <span>{{ user.userName }}</span>
          </el-form-item>

          <el-form-item label="昵称:">
            <span>{{ user.nickName }}</span>
          </el-form-item>

          <el-form-item label="姓名:">
            <span>{{ user.realName }}</span>
          </el-form-item>

          <!-- <el-form-item v-if="showPWD" label="密码" prop="password">
            <el-input
              size="small"
              type="password"
              v-model="editForm.password"
              auto-complete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item v-if="showPWD" label="再次输入" prop="password1">
            <el-input
              size="small"
              type="password"
              v-model="editForm.password1"
              auto-complete="off"
              placeholder="请再次输入密码"
            ></el-input>
          </el-form-item> -->

          <el-form-item label="角色:">
            <el-collapse>
              <el-collapse-item
                v-for="(item, index) in user.roles"
                :key="index"
                :title="item.name"
              >
                <div>
                  <span>权限:</span>
                  <el-tag v-for="(d, i) in item.permissions" :key="i">{{
                    d.name
                  }}</el-tag>
                </div>
                <div>
                  <span>菜单:</span>
                  <el-tag
                    type="success"
                    v-for="(d, i) in item.menus"
                    :key="i"
                    >{{ d.name }}</el-tag
                  >
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-form-item>

          <el-form-item label="手机号">
            <span>{{ user.phone }}</span>
          </el-form-item>

          <el-form-item label="邮件">
            <span>{{ user.email }}</span>
          </el-form-item>

          <el-form-item label="性别">
            <el-radio v-model="user.sex" label="01" disabled>男</el-radio>
            <el-radio v-model="user.sex" label="00" disabled>女</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" @click="openDialog()"
              >修改密码</el-button
            >

            <el-button size="small" type="success" @click="openView()"
              >修改个人信息</el-button
            >
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8090/user/icon"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              disabled
            >
              <img v-if="user.iconUrl" :src="user.iconUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 编辑界面 -->
    <!-- 修改密码 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="30%"
      @close="closeDialog"
    >
      <el-form
        label-width="100px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            size="small"
            type="password"
            v-model="editForm.oldPassword"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="password">
          <el-input
            size="small"
            type="password"
            v-model="editForm.password"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="再次输入" prop="password1">
          <el-input
            size="small"
            type="password"
            v-model="editForm.password1"
            auto-complete="off"
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="resetpwd('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!--修改个人信息-->
    <el-dialog
      title="修改个人信息"
      :visible.sync="isView"
      width="50%"
      @close="isView = false"
    >
      <el-form
        label-width="100px"
        :model="userInfo"
        :rules="rules"
        ref="userInfoForm"
      >
        <el-row>
          <!-- 表格 -->
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickName">
              <el-input
                size="small"
                v-model="userInfo.nickName"
                auto-complete="off"
                placeholder="请输入昵称"
              ></el-input>
            </el-form-item>

            <el-form-item label="姓名" prop="realName">
              <el-input
                size="small"
                v-model="userInfo.realName"
                auto-complete="off"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>

            <el-form-item label="手机号码" prop="phone">
              <el-input
                size="small"
                v-model="userInfo.phone"
                auto-complete="off"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input
                size="small"
                v-model="userInfo.email"
                auto-complete="off"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 头像 -->
          <el-col :span="12">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8090/user/icon"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="userInfo.iconUrl"
                :src="userInfo.iconUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="openView">重置</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          k
          @click="save('userInfoForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  inject: ["reload"],
  data() {
    var validatePass = async (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        var d = await this.$axios.post("/user/checkPWD", this.editForm);
        if (d.message == "01") {
          callback();
        } else {
          callback("密码错误!");
        }
      }
    };

    // 校验再一次输入密码
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.editForm.password != this.editForm.password1) {
          callback(new Error("密码不一致!"));
        } else {
          callback();
        }
      }
    };

    return {
      loading: false, //是显示加载
      showPWD: false,
      isView: false, //是否显示修改页面
      title: "修改密码",
      editFormVisible: false, //控制编辑页面显示与隐藏
      user: {},
      editForm: {
        id: "",
        userName: "",
        oldPassword: "",
        password: "",
        password1: "",
      },
      userInfo: {
        id: "",
        nickName: "",
        realName: "",
        phone: "",
        email: "",
        sex: "",
        iconUrl: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9]{6,20}$/,
            required: true,
            message: "密码只包含大小写字母或数字,且长度为6-20",
            trigger: "blur",
          },
        ],
        password1: [
          { validator: validatePass1, required: true, trigger: "blur" },
        ],
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            required: true,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
      },
    };
  },

  /**
   * 创建完毕
   */
  created() {
    this.init();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //初始化表格
    init() {
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
    },

    //图片上传成功时
    handleAvatarSuccess(res, file) {
      this.editForm.iconUrl = res.message;
      this.userInfo.iconUrl = res.message;
    },
    //图片上传前
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //打开修改密码界面
    openDialog() {
      this.editForm.id = this.user.id;
      this.editForm.userName = this.user.userName;
      this.editFormVisible = true;
    },

    //打开修改信息界面
    openView() {
      this.userInfo.nickName = this.user.nickName;
      this.userInfo.realName = this.user.realName;
      this.userInfo.phone = this.user.phone;
      this.userInfo.email = this.user.email;
      this.userInfo.id = this.user.id;
      this.userInfo.iconUrl = this.user.iconUrl;
      this.isView = true;
    },

    //关闭修改密码页面
    closeDialog() {
      this.editFormVisible = false;
      this.editForm = {
        id: "",
        userName: "",
        password: "",
        password1: "",
      };
      this.$refs["editForm"].resetFields();
    },

    //保存用户信息
    save(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          var d = await this.$axios.put("/user/update", this.userInfo);
          if (d.code == 200) {
            this.$message.success(d.message);
            this.isView = false;
            //重新获取用户,更新到本地缓存
            var u = await this.$axios.get("/user/byId/" + this.user.id);
            if (u != null) {
              this.user = u.data;
              window.sessionStorage.setItem("user", JSON.stringify(u.data));
            }
          } else {
            this.$message.error(d.message);
          }
        }
      });
    },
    // 重置密码
    resetpwd(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          var d = await this.$axios.post("/user/resetPWD", this.editForm);
          if (d.code == 200) {
            this.closeDialog();
            this.$message.success(d.message);
          } else {
            this.$message.error(d.message);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

 